// 1.1 获取裁剪区域的 DOM 元素
var $image = $('#image')
// 1.2  cropper  配置选项
const options = {
// 纵横比
aspectRatio: 1,
// 指定预览区域
preview: '.img-preview'
}
// 1.3 创建裁剪区域
$image.cropper(options)


// 需求2  点击上传按钮弹出文件选择框  然后 更换裁剪区域的图片
// 2.1  点击上传按钮 实际上点击的是 type=file  在页面中看不到type等于file 因为他丑~~
// 2.1.1 任何时候 上传文件一定使用的type=file 

$('#btnChooseImage').click(function(){
  // 点击上传按钮弹出文件选择框 
  $('#file').click()
})

// 2.2 更换裁剪区域的图片
// 2.2.1 先要拿到图片 

// 这个事件触发的时机 就是文件发生改变的时候 
$('#file').change(function(){
  // 2.3 获取到当前文件上传的图片    type等于file身上files属性
  console.log(this.files[0])
  // 2.3.1 这里预览的话 没有对应的服务器地址 所以我们只能用本地预览
  // 2.3.2 在JS 里面提供了一个本地预览的api 这个api 可以把上传的文件信息转换成一个本地地址 这个地址只能在自己电脑访问 
  // 2.3.3  URL.createObjectURL() 接收一个参数 参数一定是上传的文件信息

  // 2.4 存储当前的文件上传信息
  let  file = this.files[0]
  // 2.5 把他转换成一个本地的在线连接
  // 这个代码实际上是做本地预览
  let  url =  URL.createObjectURL(file)

  console.log(url)

  // 2.5.1 正常情况下 可以直接赋值给img 但是这里我们需要使用crooper  所以我们需要把这个预览地址 给corrper 

  // 2.5.2   先把原来的图片销毁 在 把新的地址赋值给img   重新初始化裁剪区域
  $image
  .cropper('destroy') // 销毁旧的裁剪区域
  .attr('src', url) // 重新设置图片路径
  .cropper(options) // 重新初始化裁剪区域

})




//  3  点击确定  将裁剪后的头像上传到服务器
//  头像图片转base64字符串(太长了后面省略了) 
//  通过cropper 可以把图片转换成base64 

$('#sure').click(function(){
  // 3.1  拿到文件信息发送数据请求
  //  通过crooper 讲图片转换成base64 
  var dataURL = $image
      .cropper('getCroppedCanvas', { // 创建一个 Canvas 画布
      width: 100,
      height: 100
      })
      .toDataURL('image/png')

  console.log(dataURL) 
  
      $.ajax({
        method: 'POST',
        url:"/my/update/avatar",
        // 注意 这个avatar 要求的是字符串 
        // dataURL 就是一个base64的字符串
        data : {
          avatar: dataURL
        },
        success: res =>{    
         layer.msg(res.message)
          if(res.status != 0) return 
         
        //  需要调用父元素的 getUserInfo 
          parent.getUserInfo &&  parent.getUserInfo()

        }
      })


})